<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="2" class="jz">关键字：</el-col>
      <el-col :span="3">
        <Select :config="data.configOption"></Select>
      </el-col>
      <el-col :span="5">
        <el-input placeholder="请输入搜索内容"></el-input>
      </el-col>  
      <el-col :span="10">
        <el-button type="primary">搜索</el-button>
      </el-col>

      <el-col :span="4">
        <el-button type="danger" class="fr">添加用户</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import index from '@/components/Select/index'
import { reactive, ref , watch,onMounted} from '@vue/composition-api'
export default{
  name:'userIndex',
  components:{
    Select:index
  },
  setup(props,{root}){
    const data = reactive({
      configOption:{
        init:["name","phone","email"]
      }
    })
    

   

    return{
      // reactive
      data
    }
  }
} 
</script>

<style lang="scss" scoped>
  .fr{
    float: right;
  }
  .jz{
    height: 40px;
    line-height: 40px;
  }
</style>